
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery colorpicker插件颜色选择器点击图标弹出颜色选择器</title>
<meta name="description" content="jquery colorpicker插件颜色选择器鼠标点击或滑过颜色图标，显示颜色选择器内容选择颜色值。一款非常好的jquery颜色选择器插件。" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serifl;color:#5a5a5a;}
/* pagedemo */
.pagedemo{width:700px;margin:0 auto;text-align:left;}
.pagedemo h1{font-size:21px;height:47px;line-height:47px;text-transform:uppercase;}
.tabsContent{border:1px solid #ccc;width:698px;overflow:hidden;}
.tab{padding:16px;}
.tab h2{font-weight:bold;font-size:16px;}
.tab h3{font-weight:bold;font-size:14px;margin-top:20px;}
.tab p{margin-top:16px;clear:both;}
.tab ul{margin-top:16px;list-style:disc;}
.tab li{margin:10px 0 0 35px;}
.tab a{color:#8FB0CF;}
.tab strong{font-weight:bold;}
.tab pre{font-size:11px;margin-top:20px;width:668px;overflow:auto;clear:both;}
.tab table{width:100%;}
.tab table td{padding:6px 10px 6px 0;vertical-align:top;}
.tab dt{margin-top:16px;}
/* colorSelector */
#colorSelector{position:relative;width:36px;height:36px;background:url(images/select.png);}
#colorSelector div{position:absolute;top:3px;left:3px;width:30px;height:30px;background:url(images/select.png) center;}
#colorSelector2{position:absolute;top:0;left:0;width:36px;height:36px;background:url(images/select2.png);}
#colorSelector2 div{position:absolute;top:4px;left:4px;width:28px;height:28px;background:url(images/select2.png) center;}
#colorpickerHolder2{top:32px;left:0;width:356px;height:0;overflow:hidden;position:absolute;}
#colorpickerHolder2 .colorpicker{background-image:url(images/custom_background.png);position:absolute;bottom:0;left:0;}
#colorpickerHolder2 .colorpicker_hue div{background-image:url(images/custom_indic.gif);}
#colorpickerHolder2 .colorpicker_hex{background-image:url(images/custom_hex.png);}
#colorpickerHolder2 .colorpicker_rgb_r{background-image:url(images/custom_rgb_r.png);}
#colorpickerHolder2 .colorpicker_rgb_g{background-image:url(images/custom_rgb_g.png);}
#colorpickerHolder2 .colorpicker_rgb_b{background-image:url(images/custom_rgb_b.png);}
#colorpickerHolder2 .colorpicker_hsb_s{background-image:url(images/custom_hsb_s.png);display:none;}
#colorpickerHolder2 .colorpicker_hsb_h{background-image:url(images/custom_hsb_h.png);display:none;}
#colorpickerHolder2 .colorpicker_hsb_b{background-image:url(images/custom_hsb_b.png);display:none;}
#colorpickerHolder2 .colorpicker_submit{background-image:url(images/custom_submit.png);}
#colorpickerHolder2 .colorpicker input{color:#778398;}
#customWidget{position:relative;height:36px;}
</style>
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript">
$(function(){
	$('#colorpickerHolder').ColorPicker({flat: true});
	
	$('#colorpickerHolder2').ColorPicker({
		flat: true,
		color: '#00ff00',
		onSubmit: function(hsb, hex, rgb) {
			$('#colorSelector2 div').css('backgroundColor', '#' + hex);
		}
	});
	$('#colorpickerHolder2>div').css('position', 'absolute');
	var widt = false;
	$('#colorSelector2').bind('click', function() {
		$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
		widt = !widt;
	});
	
	$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val(hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
		}
	})
	.bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
	});
	$('#colorSelector').ColorPicker({
		color: '#0000ff',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('#colorSelector div').css('backgroundColor', '#' + hex);
		}
	});
});
</script>
</head>
<body>
    <div class="pagedemo">
        <h1>颜色选择器 - jQuery插件</h1>
        <div class="tabsContent">
            <div class="tab">
                <h2>介绍</h2>
                <p>一个简单的组件来选择色彩在你选择的颜色一样Adobe Photoshop</p>
                <h3>特征</h3>
                <ul>
                    <li>在页面元素平面模式</li>
                    <li>颜色选择功能强大的控件</li>
					<li>容易定制通过改变一些图像的外观</li>
					<li>可视选择器颜色变化</li>
                </ul>
                <h3>例子</h3>
                <p>平面模式</p>
                <p id="colorpickerHolder">
                </p>
                <pre>
$('#colorpickerHolder').ColorPicker({flat: true});
                </pre>
                <p>自定义皮肤，并使用平面模式显示在一个自定义的颜色选择器部件。.</p>
				<div id="customWidget">
					<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
	                <div id="colorpickerHolder2">
	                </div>
				</div>

				<p>附加到一个文本字段，并使用回调函数来更新字段的值的颜色，并提交颜色设置在该领域的值。</p>
				<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
				<p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
				<p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>
				<pre>$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val(hex);
		$(el).ColorPickerHide();
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	}
})
.bind('keyup', function(){
	$(this).ColorPickerSetColor(this.value);
});
</pre>
				<p>使用回调的实现预览的颜色和添加颜色动画。</p>
				<p>
					<div id="colorSelector"><div style="background-color: #0000ff"></div></div>
				</p>
				<pre>
$('#colorSelector').ColorPicker({
	color: '#0000ff',
	onShow: function (colpkr) {
		$(colpkr).fadeIn(500);
		return false;
	},
	onHide: function (colpkr) {
		$(colpkr).fadeOut(500);
		return false;
	},
	onChange: function (hsb, hex, rgb) {
		$('#colorSelector div').css('backgroundColor', '#' + hex);
	}
});
</pre>
            </div>
        </div>
    </div>
</body>
</html>
